<template>
    <div class="hello">
        <el-tabs v-model="activeName">
            <el-tab-pane :name="item.name" v-for="(item, index) in tabpaneArr" v-if="item.show" :key="index" :label="item.label">
                <div>
                    <slot :name="item.slotName" />
                </div>
            </el-tab-pane>

            <!-- <el-tab-pane label="积分明细" name="second" :key="'second_'" v-if="showTabs[1]">
                <div>
                    <slot name="songinfo" />
                </div>
            </el-tab-pane> -->

            <!-- <el-tab-pane label="登录记录" name="third" :key="'third_'" v-if="showTabs[2]">
                <div>
                    <slot name="albuminfo" />
                </div>
            </el-tab-pane> -->
        </el-tabs>
        <!-- 注释　　　　　　　label：选项卡显示的title　　　　　　　name：与选项卡绑定的activeName对应的标识符，表示选项卡的别名　　　　　-->
    </div>
</template>
<script>
export default {
    props: {
        active: {
            type: String,
            default: 'first'
        },
        tabpaneArr: {
            type: Array,
            default: function() {
                return [
                    {
                        name: 'first',
                        slotName: 'buyRecord',
                        label: '购买记录',
                        show: true
                    },
                    {
                        name: 'second',
                        slotName: 'integralDetail',
                        label: '积分明细',
                        show: true
                    },
                    {
                        name: 'third',
                        slotName: 'loginRecord',
                        label: '登录记录',
                        show: true
                    }
                ];
            }
        }
    },
    name: 'TabText',
    data() {
        return {
            //默认第一个选项卡
            // activeName: 'first'
            activeName: this.active
        };
    },
    watch: {
        activeName(a, b) {
            console.log(a, b);
            if (a == 'first' && this.tabpaneArr[0].slotName == 'buyRecord') {
                // 购买记录
                this.$emit('getData', '/user/purchase/list');
            } else if (a == 'second' && this.tabpaneArr[1].slotName == 'integralDetail') {
                // 积分明细
                this.$emit('getData', '/user/integral/list');
            } else if (a == 'third' && this.tabpaneArr[2].slotName == 'loginRecord') {
                // 登录购买
                this.$emit('getData', '/user/loginlog/list');
            }
        }
    }
};
// activeName：默认显示那个tab。//activeName：el-tabs组件双向绑定的值，activeName值的取值是要对应el-tab-pane标记的name值
</script>

<style lang="scss" scoped>
.hello {
    background: #fff;
}
</style>
